<template>
<view >
  <my-search></my-search>
  <view class="cate">
    <scroll-view class="scroll-left" scroll-y="true" :show-scrollbar="false">
    					<view id="demo1" class="left-item" v-for="(item,index) in catelist" @click="changeitem(index)" :key="item.cat_id" :class="{active:index===currentindex}">
                <text class="line"></text>
                <text>{{item.cat_name}}</text>
              </view>
    </scroll-view>
    <scroll-view class="scroll-right" scroll-y="true" :show-scrollbar="false" :scroll-top="snum">
    				<view class="item"  v-for="(item,index) in catelist[currentindex].children" :key="item.cat_id">
              <view class="title" >/{{item.cat_name}}/</view>
              <view class="items">
                <view class="item"  v-for="img in item.children" :key="img.cat_id" @click="handleitem(img.cat_id)">
                  <image :src="img.cat_icon" mode="widthFix"></image>
                  <view class="imgtext">{{img.cat_name}}</view>
                </view>
                <view class="item">
                </view>
                <view class="item">
                </view>
              </view>
            </view>
    </scroll-view>
  </view>
</view>
</template>

<script>
  export default {
    data() {
      return {
        catelist:[],
        currentindex:0,
        snum:1
      };
    },
    onLoad() {
      this.getcatelist()
    },
    methods:{
     async getcatelist(){
        const {data:{message}} =await  uni.$http({url:'/api/public/v1/categories'})
        this.catelist = message
      },
      changeitem(i){
        this.currentindex = i
        this.snum=  this.snum?0:1 //这样就可以
      },
      handleitem(id){
        uni.navigateTo({
          url:"/subpkg/goods_list/goods_list?cid="+id
        })
      }
    }
  }
</script>

<style lang="scss">
  .cate{
    display: flex;
    height: calc(100vh - 49px);
  }
  .scroll-left{
    width: 120px;
    height: 100%;
    text-align:center;
    .left-item{
      background-color: #ccc;
      padding: 20rpx;
    }
  }
  .active{
    position: relative;
      background-color: #fff !important;
  }
  .active .line{
    position: absolute;
    display: block;
    width: 2px;
    height: 40rpx;
    left: 2px;
    border-left: 4px solid #f00000;
  }
  .scroll-right{
    flex: 1;
    height: 100%;
    .item{
      box-sizing: border-box;
      text-align: center;
      .title{
        font-weight: 700;
      }
      .items{
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        .item{
          width: 30%;
          display: flex;
          align-items: center;
          // justify-content: center;
          font-size: 28rpx;
          flex-direction: column;
          margin-bottom: 20rpx;
          image{
            width: 100rpx;
          }
        }
      }
    }
  }
</style>
